import React, { Component } from "react"
import {
    View,
    Image,
    Linking,
    Text,
    Alert,
    StyleSheet,
    TextInput, TouchableOpacity, Keyboard, ScrollView, TouchableHighlight
} from "react-native"
import NavigationBar from 'react-native-navbar'
import navigationhelper from 'src/components/navigationhelper'
import {checkPhone, deviceHeight, deviceWidth, isIPhoneX} from "src/util"
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"

@inject('userAuth')
export default class FindPassword extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showPhoneVerified: false,
            smsText: '获取验证码',
            isFetchingSMSCode: false,
            isShowPassword: false,
            isShowRepassword: false
        }
    }
    onBlur = () => {
        this.setState({
            focus: undefined
        })
    }
    onDone = () => {
        if(!this.phone){
            return Layer.showMsg('手机号不能为空')
        }
        if(!this.smsCode){
            return Layer.showMsg('验证码不能为空')
        }
        if(!this.password){
            return Layer.showMsg('新密码不能为空')
        }
        if(!this.repassword){
            return Layer.showMsg('确认新密码不能为空')
        }
        if(!this.state.showPhoneVerified){
            return Layer.showMsg('手机号有误')
        }
        if(this.repassword !== this.password){
            return Layer.showMsg('两次密码输入不一致')
        }
        this.props.userAuth.findPassword({
            mobile: this.phone,
            validate_code: this.smsCode,
            password: this.password,
            repassword: this.repassword
        }).then(() => {
            Layer.showMsg('找回密码成功')
            navigationhelper.goBack()
        }).catch((error) => {
            Layer.showMsg(error.message)
        })
    }

    fetchSmsCode = () => {
        if(this.state.isFetchingSMSCode){
            return
        }
        if(!this.phone){
            return Layer.showMsg('手机号不能为空')
        }
        if(!this.state.showPhoneVerified){
            return Layer.showMsg('手机号有误')
        }

        this.props.userAuth.getSmsCode({
            mobile: this.phone
        }).then(() => {
            Layer.showMsg('验证码已发送')
            var timesRun = 0;
            var interval = setInterval(() =>{
                timesRun += 1;
                if(timesRun === 60){
                    this.setState({
                        isFetchingSMSCode: false,
                        smsText: '获取验证码'

                    })
                    clearInterval(interval)
                    return
                }
                this.setState({
                    isFetchingSMSCode: true,
                    smsText: (60 - timesRun)
                })
            }, 1000)
        }).catch(function (error) {
            Layer.showMsg(error.message)
        })
    }
    onChangeText = (text, type) => {
        switch (type) {
            case 'phone': {
                this.phone = text
                this.setState({
                    showPhoneVerified: checkPhone(text)
                })
            }
            default: {
                this[type] = text
            }
        }
    }
    render() {
        return (
            <TouchableOpacity activeOpacity={1} onPress={() => {
                Keyboard.dismiss()
            }}>
                <Image source={require('src/assets/login/dingbubeijing.png')}
                       style={{position: 'absolute', top: 0, width: deviceWidth, height: deviceWidth * 379 / 375}}/>
                <NavigationBar style={{height: isIPhoneX() ? 64: 44}}
                               tintColor={'transparent'}
                               leftButton={
                                   <TouchableHighlight
                                       underlayColor="transparent"
                                       style={{justifyContent:'center', alignItems: 'center'}} onPress={()=>{navigationhelper.goBack()}}>
                                       <View style={styles.leftButton}>
                                           <Image source={require('src/assets/login/backWhite.png')}/>
                                       </View>
                                   </TouchableHighlight>
                               }/>
                <ScrollView contentContainerStyle={{paddingTop: 50, paddingBottom: 20}}>
                    <View style={styles.container}>
                        <Text style={styles.findPass}>找回密码</Text>
                        <Text style={styles.phone}>手机号</Text>
                        <View style={styles.icon}>
                            <TextInput
                                style={styles.input}
                                placeholder="请输入手机号"
                                onFocus={() => {
                                    this.setState({
                                        focus: 'phoneInput'
                                    })
                                }}
                                onBlur={this.onBlur}
                                onChangeText={(text) => {
                                    this.onChangeText(text, 'phone')
                                }}/>
                            {this.state.showPhoneVerified && <Image source={require('src/assets/login/gou.png')}/>}
                        </View>
                        <RenderLine type="phoneInput" state={this.state}/>
                        <Text style={styles.smsCode}>验证码</Text>
                        <View style={styles.icon}>
                            <TextInput
                                style={styles.input}
                                placeholder="请输入验证码"
                                onFocus={() => {
                                    this.setState({
                                        focus: 'smsCodeInput'
                                    })
                                }}
                                onBlur={this.onBlur}
                                onChangeText={(text) => {
                                    this.onChangeText(text, 'smsCode')
                                }}/>
                            <TouchableOpacity
                                style={[styles.codeBack, {backgroundColor: this.state.isFetchingSMSCode ? 'darkgrey' : 'rgba(40,208,221, 0.2)'}]}
                                onPress={this.fetchSmsCode}>
                                <Text
                                    style={{color:this.state.isFetchingSMSCode ? 'white' : '#28D0DD', fontSize: 10, fontFamily: 'PingFang SC'}}>
                                    {this.state.smsText}
                                </Text>
                            </TouchableOpacity>
                        </View>
                        <RenderLine type="smsCodeInput" state={this.state}/>
                        <Text style={styles.setPassword}>设置密码</Text>
                        <View style={styles.icon}>
                            <TextInput
                                style={styles.input}
                                placeholder="请输入6-12位字符"
                                placeholderTextColor='#E4E4E4'
                                onFocus={() => {
                                    this.setState({
                                        focus: 'passwordInput'
                                    })
                                }}
                                secureTextEntry={!this.state.isShowPassword}
                                onBlur={this.onBlur}
                                onChangeText={(text) => {
                                    this.onChangeText(text, 'password')
                                }}/>
                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    isShowPassword: !this.state.isShowPassword
                                })
                            }}>
                                {this.state.isShowPassword ?
                                    <Image source={require('src/assets/login/zhenyan.png')}/> :
                                    <Image source={require('src/assets/login/biyan.png')}/>}
                            </TouchableOpacity>
                        </View>
                        <RenderLine type="passwordInput" state={this.state}/>
                        <Text style={styles.setPassword}>确认密码</Text>
                        <View style={styles.icon}>
                            <TextInput
                                style={styles.input}
                                placeholder="请输入6-12位字符"
                                placeholderTextColor='#E4E4E4'
                                onFocus={() => {
                                    this.setState({
                                        focus: 'passwordEnsureInput'
                                    })
                                }}
                                secureTextEntry={!this.state.isShowRepassword}
                                onBlur={this.onBlur}
                                onChangeText={(text) => {
                                    this.onChangeText(text, 'repassword')
                                }}/>
                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    isShowRepassword: !this.state.isShowRepassword
                                })
                            }}>
                                {this.state.isShowRepassword ?
                                    <Image source={require('src/assets/login/zhenyan.png')}/> :
                                    <Image source={require('src/assets/login/biyan.png')}/>}
                            </TouchableOpacity>
                        </View>
                        <RenderLine type="passwordEnsureInput" state={this.state}/>
                        <View style={{marginTop: 5, display: 'flex', flexDirection: 'row'}}>
                            <View style={{flex: 1}}/>
                            <TouchableOpacity onPress={() => {
                                Alert.alert(
                                    '联系客服',
                                    '4001883929',
                                    [
                                        {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                                        {
                                            text: '确定', onPress: () => {
                                                Linking.openURL("tel:4001883929")
                                            }
                                        }],
                                    {cancelable: false}
                                )
                            }}>
                                <Text style={styles.forgetPassword}>手机号失效?</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: -20}}>
                        <TouchableOpacity
                            onPress={this.onDone}
                            style={styles.ensureButton}>
                            <Text style={styles.ensureText}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </TouchableOpacity>
        )
    }
}

function RenderLine (props) {
    var color = '#E4E4E4'
    if (props.type === props.state.focus) {
        color = '#378EFB'
    }
    return (
        <View style={{backgroundColor: color, height: 2, marginTop: 5}} />
    )
}


const styles = StyleSheet.create({
    container: {
        marginLeft: 25,
        height: 426,
        marginRight: 25,
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'white',
        borderRadius: 10,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18
    },
    phone: {
        fontSize: 12,
        lineHeight: 17,
        marginTop: 10,
        color: '#8E8E93',
        fontFamily: 'PingFang SC'
    },
    findPass: {
        fontSize: 20,
        lineHeight: 28,
        color: '#2E2E2E',
        fontFamily: 'PingFang SC'
    },
    setPassword: {
        fontSize: 12,
        lineHeight: 17,
        marginTop: 18,
        color: '#8E8E93',
        fontFamily: 'PingFang SC'
    },
    smsCode: {
        fontSize: 12,
        lineHeight: 17,
        marginTop: 18,
        color: '#8E8E93',
        fontFamily: 'PingFang SC'
    },
    password: {
        fontSize: 12,
        lineHeight: 17,
        marginTop: 20,
        color: '#8E8E93',
        fontFamily: 'PingFang SC'
    },
    smsCodeInput: {
        marginTop: 18,
        fontSize: 10
    },
    input: {
        padding:0,
        flex: 1,
        fontSize: 10,
        height:20,
        paddingTop: 0,
        paddingBottom: 0,
    },
    icon: {
        height: 16,
        marginTop: 15,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center'
    },
    forgetPassword: {
        fontSize: 10,
        lineHeight: 14,
        color: '#378EFB',
        fontFamily: 'PingFang SC'
    },
    ensureButton: {
        backgroundColor: '#378EFB',
        width: 229,
        height: 50,
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    ensureText: {
        color: 'white',
        fontSize: 16,
        fontFamily: 'PingFang SC'
    },
    codeBack: {
        width: 71,
        height: 20,
        borderRadius: 10,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    leftButton: {
        paddingTop: 25,
        paddingLeft: 12,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
})